<template>
  <div style="padding: 10px 5px">
    <el-form
      ref="form"
      v-loading="loading"
      size="medium"
      :model="form"
      label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <upload-input ref="uploadInput" v-model="form.icon"></upload-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input type="textarea" v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item label="代理">
            <el-input v-model="form.agent"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-cascader
              :options="areasOptions"
              v-model="selectedArea"
              :props="{ value: 'code', label: 'name'}"
              @change="handleAreaChange"
              style="width: 100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="专业">
            <el-select
              v-model="form.major"
              multiple
              filterable
              default-first-option
              placeholder="请选择专业"
              style="width: 100%">
              <el-option
                v-for="item in majorList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="详情">
            <tinymce ref="tinymce" v-model="form.details" :height="300"></tinymce>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit()" type="primary">立即保存</el-button>
            <el-button @click="$router.push({ name: 'investigation' })">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import UploadInput from '@/components/UploadInput'
import Tinymce from '@/components/Tinymce'
import { getDetails, create, update as updateInvestigation } from '@/api/investigation'
import { getList as getMajorList } from '@/api/major'
import { getAreas } from '@/api/public'
import EditMixin from './EditMixin'

export default {
  mixins: [ EditMixin ],
  components: {
    UploadInput,
    Tinymce
  },
  data() {
    return {
      areasOptions: [],
      selectedArea: [],
      form: {
        name: null,
        price: null,
        major: null,
        icon: null,
        address: null,
        contact: null,
        agent: null,
        city: null,
        details: null
      },
      majorList: [],
      loading: false
    }
  },
  created() {
    this.id && this.getDetails()
    this.getMajorList()
    getAreas().then(res => {
      this.areasOptions = res
    })
  },
  methods: {
    onSubmit() {
      if (this.id) {
        this.update()
      } else {
        this.create()
      }
    },
    getDetails() {
      this.loading = true
      getDetails(this.id).then(res => {
        this.loading = false
        if (res.status === 200 && res.data) {
          const { name,  price, major, icon, address, 
                  contact, agent, city, details} = res.data
          this.form.name = name
          this.form.price = price
          this.form.major = major
          this.form.icon = icon
          this.form.address = address
          this.form.contact = contact
          this.form.agent = agent && agent.name
          this.form.city = city
          this.form.details = details

          this.selectedArea = ['', city]
        }
      })
    },
    // 获取专业列表
    getMajorList() {
      getMajorList().then(res => {
        if (res.status === 200) {
          this.majorList = res.data.map(item => {
            return {
              value: item.id,
              label: item.name
            }
          })
        }
      })
    },
    // 新建
    create() {
      create(this.form).then(res => {
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    update() {
      updateInvestigation(this.id, this.form).then(res => {
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    handleAreaChange(value) {
      this.form.city = value[value.length - 1]
    }
  }
}
</script>